<template>
	<view class="content">
		<view class="bc_img">
			<image :src=" imgurl+ paybg" style="width: 750rpx;height: 1556rpx;"></image>
		</view>

		<view class="goBang u-border-top">

			<!-- 对战信息 -->
			<!-- <view class="goBang-user flexItems">
					<view class="flexCenter flexColumn flex1 box">
						<u-icon class="goBang-chess" name="/static/images/black.png" size="50"></u-icon>
						<view class="u-m-t-20 fontBold c757575">电脑</view>
					</view>
					<view class="fontBold cmain u-font-40">VS</view>
					<view class="flexCenter flexColumn flex1 box">
						<u-icon class="goBang-chess" name="/static/images/white.png" size="50"></u-icon>
						<view class="u-m-t-20 fontBold c757575">玩家</view>
					</view>
				</view> -->
			<view class="goBang-container boxtb">
				<!-- 棋盘底座 -->
				<view class="goBang-bc">

					<view class="goBang-board u-rela">
						<!-- 棋盘网格 -->
						<view class="goBang-grid-box u-rela">
							<view class="goBang-grid">
								<view class="goBang-grid-tr" v-for="(item,index) in 14" :key="index">
									<view class="goBang-grid-td" v-for="(item,index) in 14" :key="index"></view>
								</view>
							</view>
							<view class="point-c"></view>
							<view class="point-1"></view>
							<view class="point-2"></view>
							<view class="point-3"></view>
							<view class="point-4"></view>
						</view>
						<!-- 隐藏的棋盘网格  用于下棋子用的 -->
						<view class="goBang-check">
							<view class="goBang-check-tr" v-for="(item1,index1) in chessBoard" :key="index1">
								<view class="goBang-check-td" v-for="(item2,index2) in item1" :key="index2"
									@click="playerChess(index1,index2)">
									<image class="goBang-check-chess " :class="chessBoarr[index1][index2]!=0&&item2==chessBoarr[index1][index2]?'myfirstcss':''" :src="player[item2]" v-if="item2!=0"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 功能按钮 -->
				<view class="goBang-btns">
					<!-- <view class="goBang-btn" @click="regret" v-if="!isOver">
							<u-icon name="thumb-down-fill" size="30" color="#999"></u-icon>
							<text>悔棋</text>
						</view> -->
					<view class="goBang-btn" @click="restart">
						<u-icon name="reload" size="30" color="#999"></u-icon>
						<text>重来</text>
					</view>
					<view class="goBang-btn" @click="defeat" v-if="!isOver">
						<u-icon name="fingerprint" size="30" color="#999"></u-icon>
						<text>认输</text>
					</view>
				</view>
				<!-- 规则说明 -->
				<!-- <view class="boxtb">
						<view class="u-m-t-10 fontBold u-font-32 c757575">规则说明:</view>
						<view class="u-m-t-20 c757575">1、玩家先手</view>
						<view class="u-m-t-10 c757575">2、其他规则，不知道就百度去，惯得！！！</view>
					</view> -->
			</view>


		</view>


		<u-popup v-model="gameshow" mode="center" border-radius="35" @close="gameclose" :closeable="true"
			:overlay="true">
			<view class="fail-k">
				<view class="fail-title">
					活动结束感谢您的参与
				</view>
				<view class="fail-content">
					积分已到账，请注意查收
				</view>
				<view class="fail-bt" @click="goshop">
					进入商城
				</view>
			</view>
		</u-popup>

	</view>

</template>

<script>
	import {
		finishActivity
	} from "@/api/index/index";
	import {
		BASE_URL_IMAHE
	} from "../../../utils/https";
	const app = getApp()
	export default {
		data() {
			return {
				imgurl: BASE_URL_IMAHE,
				gameshow: false,
				player: { // 0=没有子  1=电脑  2=玩家
					0: null,
					1: '../../static/images/black.png',
					2: '../../static/images/white.png'
				},
				chessBoard: [], // 棋盘数组
				chessBoarr:[],
				isWho: true, // 该谁下
				isOver: false, // 活动是否结束
				allWins: [], // 全部赢法的数组
				allCount: 0, // 一共有多少种赢法
				playerWins: [], // 玩家赢法的数组
				computerWins: [], // 电脑赢法的数组

				form: {
					activityId: "",
					whiteListId: "",
					joinRecordId: "",
					userRef: "",
					token: "",
				},
				computerChessispay: false,
				setTimeoutpay: null,
				setTimeoutwjpay: null,
				setTimeoutpdpay: null,
				jumpShopLink: "",

			};
		},
		onLoad(options) {
			// activityId
			// whiteListId
			// joinRecordId
			// userRef
			// token
			this.form = {
				...options
			}
			var sjs = this.randomWord()
			var datatime = Date.parse(new Date());
			var tokens = '' + sjs + '' + datatime
			this.form.token = tokens

			this.paybg = app.globalData.data.inpayimg

			if (!uni.getStorageSync("userRef")) {
				uni.reLaunch({
					url: "/pages/home/index"
				})
			} else {
				this.form.userRef = uni.getStorageSync("userRef")
			}
			if (!options.activityId || !options.whiteListId || !options.joinRecordId) {
				// 跳转回原页面
				if (getCurrentPages().length == 1) {
					uni.reLaunch({
						url: "/pages/home/index"
					})
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}

			} else {
				this.form.activityId = options.activityId
				uni.showLoading({
					title: "加载中",
				})
			}
			this.chess_init();
			uni.showToast({
				title: "欢迎来到五子棋",
				icon: 'none'
			});
		},
		methods: {
			goshop(url) {
				window.location.href = this.jumpShopLink
			},
			gameclose() {
				uni.reLaunch({
					url: "/pages/home/index"
				})
			},
			//提交成績
			async finishActivityfun() {
				const res = await finishActivity(JSON.stringify(this.form))
				if (res.result == 0) {
					this.gameshow = true
					this.jumpShopLink = res.jumpShopLink
				} else {
					uni.showToast({
						icon: "error",
						title: res.message,
					})
				}

			},

			// 悔棋
			regret() {
				uni.showToast({
					title: "世上没有后悔药~",
					icon: 'none'
				});
			},
			// 重来
			restart() {
				uni.showToast({
					title: "欢迎来到五子棋",
					icon: 'none'
				});
				clearTimeout(this.setTimeoutwjpay)
				clearTimeout(this.setTimeoutpay)
				clearTimeout(this.setTimeoutpdpay)
				this.computerChessispay = false
				this.chessBoard = [];
				this.chessBoarr=[]
				this.isOver = false;
				this.isWho = true;
				this.chess_init();
			},
			// 认输
			defeat() {

				if (this.isOver) {
					uni.showToast({
						title: "活动已结束，可以重新开始了",
						icon: 'none'
					});
				} else {
					// if(this.player)
					this.isOver = true
					uni.showToast({
						title: "您已认输",
						icon: 'none'
					});
				}
				setTimeout(() => {
					this.finishActivityfun()
				}, 1000)
			},
			// 玩家落子
			playerChess(x, y) {
				if (this.computerChessispay) {
					return
				}
				this.computerChessispay = true
				// 当此点有棋子 或者 活动结束 或者 不论到你时，则不能落子
				if (this.chessBoard[x][y] != 0 || !this.isWho || this.isOver) {
					return;
				}
				// 落子
				this.restarrt()
				
				this.chessBoard[x][y] = 2;
				this.chessBoarr[x][y] = 2;
				this.$forceUpdate();
				// 判断输赢
				this.setTimeoutpdpay = setTimeout(() => {
					for (let k = 0; k < this.allCount; k++) {
						if (this.allWins[x][y][k] == true) {
							this.playerWins[k]++;
							this.computerWins[k] = 6;
							if (this.playerWins[k] == 5) {
								this.isOver = true;
								uni.showToast({
									title: "玩家获胜!!!!"
								});

								this.setTimeoutwjpay = setTimeout(() => {
									this.finishActivityfun()
								}, 1000)

							}
						}
					}
				}, 50)
				// 如果玩家没获胜 则该电脑落子
				this.setTimeoutpay = setTimeout(() => {
					if (!this.isOver) {
						this.isWho = !this.isWho;
						this.computerChess();
						this.computerChessispay = false
					}
				}, 1500)
			},
			//重置下的最后选中的棋子
			restarrt(){
				//棋盘
				for (let i = 0; i < 15; i++) {
					this.chessBoarr[i]=[];
					for (let j = 0; j < 15; j++) {
						this.chessBoarr[i][j]=0;
					}
				}
			},
			// 电脑落子
			computerChess() {
				// 电脑落子 利用算法————权重值
				// 判断哪一点的值最高，也就是对电脑的利益最大
				// 每下一步，就会判断某点对于玩家利益大还是自身利益大，来进行围堵和进攻
				const playerScore = []; // 对于玩家而言，每一个空点的数值集合
				const computerScore = []; // 对于电脑而言，每一个空点的数值集合
				let maxScore = 0; // 最大值
				let x = 0,
					y = 0; // 最后决定电脑落子的位置

				// 初始化玩家和电脑每个点的数值
				for (let i = 0; i < 15; i++) {
					playerScore[i] = [];
					computerScore[i] = [];
					for (let j = 0; j < 15; j++) {
						playerScore[i][j] = 0;
						computerScore[i][j] = 0;
					}
				}
				// 开始遍历棋盘（查看当前棋盘中所有空点）
				for (let i = 0; i < 15; i++) {
					for (let j = 0; j < 15; j++) {
						if (this.chessBoard[i][j] == 0) { // 此点可落子

							// 遍历所有赢法 给玩家和电脑的每个空点 打分 分值最高的点则是电脑落子点
							for (let k = 0; k < this.allCount; k++) {
								if (this.allWins[i][j][k] == true) { // 判断当前点的赢法中有没有玩家或者电脑的棋子

									// 如果有玩家的棋子
									if (this.playerWins[k] === 1) { // 赢法中包含一个玩家棋子...
										playerScore[i][j] += 100;
									} else if (this.playerWins[k] === 2) {
										playerScore[i][j] += 400;
									} else if (this.playerWins[k] === 3) {
										playerScore[i][j] += 800;
									} else if (this.playerWins[k] === 4) {
										playerScore[i][j] += 2000;
									}
									// 如果有电脑的棋子
									// 相同棋子数时，电脑的权重值要比玩家的高，首先考虑自己；
									// 但是当玩家达到三颗时，自身如果没有机会，则玩家权重值大
									if (this.computerWins[k] === 1) { // 赢法中包含一个电脑棋子...
										computerScore[i][j] += 150;
									} else if (this.computerWins[k] === 2) {
										computerScore[i][j] += 450;
									} else if (this.computerWins[k] === 3) {
										computerScore[i][j] += 950;
									} else if (this.computerWins[k] === 4) {
										computerScore[i][j] += 10000;
									}

								}
							}

							// 比较玩家和电脑在某点的分值
							// 玩家
							if (playerScore[i][j] > maxScore) {
								maxScore = playerScore[i][j];
								x = i;
								y = j;
							} else if (playerScore[i][j] == maxScore) {
								// 如果玩家在当前点的分跟前一个相等，就再跟电脑自身在该点的值进行比较
								// 如果电脑在当前点，比在上一个点的分大，说明电脑下这个点的优势更大， 以此类推，推出所有点的结果
								if (computerScore[i][j] > computerScore[x][y]) {
									maxScore = computerScore[i][j];
									x = i;
									y = j;
								}
							}
							// 电脑
							if (computerScore[i][j] > maxScore) {
								maxScore = computerScore[i][j];
								x = i;
								y = j;
							} else if (computerScore[i][j] == maxScore) {
								if (playerScore[i][j] > playerScore[x][y]) {
									maxScore = playerScore[i][j];
									x = i;
									y = j;
								}
							}

						}
					}
				}

				// 此时电脑就可以落子了
				this.restarrt()
				this.chessBoard[x][y] = 1;
				this.chessBoarr[x][y] = 1;
				this.$forceUpdate();
				// 判断电脑是否获胜
				setTimeout(() => {
					for (let k = 0; k < this.allCount; k++) {
						if (this.allWins[x][y][k] == true) {
							this.computerWins[k]++;
							this.playerWins[k] = 6;
							if (this.computerWins[k] == 5) {
								this.isOver = true;
								uni.showToast({
									title: "电脑获胜！"
								});

								setTimeout(() => {
									this.finishActivityfun()
								}, 1000)

							}
						}
					}
				}, 50)

				if (!this.isOver) {
					this.isWho = !this.isWho;
				}
			},

			// 初始化
			chess_init() {
				//棋盘 
				for (let i = 0; i < 15; i++) {
					this.chessBoard[i] = [];
					this.chessBoarr[i]=[];
					for (let j = 0; j < 15; j++) {
						this.chessBoard[i][j] = 0;
						this.chessBoarr[i][j]=0;
					}
				}
				// 初始化所有赢法的数组
				for (let i = 0; i < 15; i++) {
					this.allWins[i] = [];
					for (let j = 0; j < 15; j++) {
						this.allWins[i][j] = [];
					}
				}
				// 横向赢法
				for (let i = 0; i < 15; i++) {
					for (let j = 0; j < 11; j++) {
						for (let k = 0; k < 5; k++) {
							this.allWins[i][j + k][this.allCount] = true;
						}
						this.allCount++;
					}
				}
				// 竖向赢法
				for (let i = 0; i < 11; i++) {
					for (let j = 0; j < 15; j++) {
						for (let k = 0; k < 5; k++) {
							this.allWins[i + k][j][this.allCount] = true;
						}
						this.allCount++;
					}
				}
				// 斜向（左上 -> 右下）
				for (let i = 0; i < 11; i++) {
					for (let j = 0; j < 11; j++) {
						for (let k = 0; k < 5; k++) {
							this.allWins[i + k][j + k][this.allCount] = true;
						}
						this.allCount++;
					}
				}
				// 斜向（右上 -> 左下）
				for (let i = 0; i < 11; i++) {
					for (let j = 14; j > 3; j--) {
						for (let k = 0; k < 5; k++) {
							this.allWins[i + k][j - k][this.allCount] = true;
						}
						this.allCount++;
					}
				}
				// console.log(this.allCount); // 572种赢法

				// 统计玩家与电脑的赢法数组
				// 简单来说，玩家和电脑都有572种赢法，每种赢法初始值是0；
				// 例如当玩家在第一种赢法中落一颗子，与之对应的赢法就+1，当前加到5的时候，说明第一种赢法中有了玩家五颗子，所以玩家赢。
				// 反之，当第一种赢法中玩家落了四颗，但是电脑落了一颗，那么第一种赢法对应的玩家就+4，电脑+1，这样在第一种赢法里，玩家与电脑都不能获胜。
				// 以此类推其他的赢法...
				for (let i = 0; i < this.allCount; i++) {
					this.playerWins[i] = 0;
					this.computerWins[i] = 0;
				}
			},
			randomWord() {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
					'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
					'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
					'x', 'y', 'z'
				];
				var nums = "";
				for (var i = 0; i < 20; i++) {
					var id = parseInt(Math.random() * 61);
					nums += chars[id]
				}
				return nums;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		justify-content: center;
		width: 750rpx;
		height: 100vh;
		align-items: center;
	}

	.bc_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		display: flex;
		justify-content: center;
		overflow: hidden;
		/* image{
			width: 750rpx;
			height: 1556rpx;
		} */
	}

	.goBang {
		padding: 10rpx;
		width: 748rpx;
		height: auto;
	}

	.goBang-container {
		position: relative;
	}

	.goBang-chess {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		box-shadow: 0 0 8rpx 4rpx rgba(0, 0, 0, .2);
		position: relative;
	}

	.goBang-bc {
		background: url("../../static/images/qp_bg.png");
		background-size: 100% 100%;
		padding: 20rpx;
	}

	.goBang-board {
		width: 100%;
		height: 690rpx;
		/* background-color: #f7e7b6; */

		border-radius: 10rpx;
		border: 2rpx solid rgba(0, 0, 0, .05);
		box-shadow: 0 0 6rpx 2rpx rgba(0, 0, 0, .1);
		box-sizing: border-box;
		padding: 20rpx;

		.goBang-grid-box {
			width: 100%;
			height: 100%;

			.point-c {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: #030000;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.point-1 {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: #030000;
				top: 21.5%;
				left: 21.5%;
				transform: translate(-50%, -50%);
			}

			.point-2 {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: #030000;
				top: 21.5%;
				right: 21.5%;
				transform: translate(50%, -50%);
			}

			.point-3 {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: #030000;
				bottom: 21.5%;
				right: 21.5%;
				transform: translate(50%, 50%);
			}

			.point-4 {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background-color: #030000;
				bottom: 21.5%;
				left: 21.5%;
				transform: translate(-50%, 50%);
			}
		}

		.goBang-grid {
			width: 100%;
			height: 100%;
			border-top: 2rpx solid #030000;
			border-left: 2rpx solid #030000;
			display: flex;
			flex-direction: column;

			.goBang-grid-tr {
				width: 100%;
				display: flex;
				flex: 1;
			}

			.goBang-grid-td {
				flex: 1;
				border-right: 2rpx solid #030000;
				border-bottom: 2rpx solid #030000;
			}
		}

		.goBang-check {
			display: flex;
			flex-direction: column;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 1;
			border-radius: 10rpx;
			
			.goBang-check-tr{
				width: 100%;
				display: flex;
				flex: 1;
			}
			

			.goBang-check-td {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.goBang-check-chess {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
				box-shadow: 0 2rpx 10rpx 0rpx rgba(0, 0, 0, .5);
			}
		}
	}

	.goBang-btns {

		display: flex;
		align-items: center;
		justify-content: center;
		/* position: fixed; */
		/* bottom: 10rpx;
		right: 0;
		left: 0; */
		padding: 30rpx;

		/* position: absolute; */
		.goBang-btn {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, .1);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-left: 30rpx;
			color: #999;
			font-size: 24rpx;
		}
	}


	.fail-k {
		width: 490rpx;
		height: 405rpx;
		text-align: center;

		.fail-title {
			padding-top: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #111827;
		}

		.fail-content {
			margin-top: 29rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #718096;
		}

		.fail-bt {
			margin: 55rpx auto 0rpx;
			width: 328rpx;
			height: 64rpx;
			background-color: #292c34;
			color: #ffffff;
			border-radius: 35rpx;
			line-height: 64rpx;

		}

	}
	.myfirstcss{
		animation:myfirst 0.5s linear 0.5s infinite alternate;
			/* Firefox: */
			-moz-animation:myfirst 0.5s linear 0.5s infinite alternate;
			/* Safari and Chrome: */
			-webkit-animation:myfirst 0.5s linear 0.5s infinite alternate;
			/* Opera: */
			-o-animation:myfirst 0.5s linear 0.5s infinite alternate;
	}
	
	@keyframes myfirst
	{
	    0%   {transform: scale(1);}
	    50%  {transform: scale(1.2);}
	 
	    100% {transform: scale(1);}
	}
</style>